{% extends "base.html" %}
{% block title %}{{ _('Debugger - ') + function_name }}{% endblock %}
{% block init_script %}

try {
  require(
    ['sources/generated/debugger_direct'],
    function(pgDirectDebug) {
      var pgDirectDebug = pgDirectDebug || pgAdmin.Tools.DirectDebug;
      var $ = pgDirectDebug.jquery;

      pgDirectDebug.init({{ uniqueId }}, {{ debug_type }});
      window.onbeforeunload = function(ev) {
        $.ajax({
          url: "{{ url_for('debugger.index') }}close/{{ uniqueId }}",
          method: 'DELETE'
        });
      };
    },
    function() {
      console.log(arguments);
    });
} catch (err) {
  console.log(err);
}
{% endblock %}
{% block body %}
{% if is_desktop_mode and is_linux %}
<style>
    body
    .alertify .ajs-dimmer,.alertify .ajs-modal{-webkit-transform: none;}
    .alertify-notifier{-webkit-transform: none;}
    .alertify-notifier .ajs-message{-webkit-transform: none;}
    .alertify .ajs-dialog.ajs-shake{-webkit-animation-name: none;}
    .debugger-container .wcLoadingIcon.fa-pulse{-webkit-animation: none;}
</style>
{% endif %}
<div class="dubugger_main_container" tabindex="0">
    <nav class="navbar-inverse navbar-fixed-top">
        <div id="btn-toolbar" class="btn-toolbar pg-prop-btn-group bg-gray-2 border-gray-3" role="toolbar" aria-label="">
            <div class="btn-group" role="group" aria-label="">
                <button type="button" class="btn btn-default btn-step-into"
                        title="{{ _('Step into') }}{{ _(' (accesskey+{0})'.format(accesskey.step_into)) }}"
                        accesskey="{{ accesskey.step_into }}"
                        tabindex="0" autofocus="autofocus">
                    <i class="fa fa-indent"></i>
                </button>
                <button type="button" class="btn btn-default btn-step-over"
                        title="{{ _('Step over') }}{{ _(' (accesskey+{0})'.format(accesskey.step_over)) }}"
                        accesskey="{{ accesskey.step_over }}"
                        tabindex="0">
                    <i class="fa fa-outdent"></i>
                </button>
                <button type="button" class="btn btn-default btn-continue"
                        title="{{ _('Continue/Start') }}{{ _(' (accesskey+{0})'.format(accesskey.start)) }}"
                        accesskey="{{ accesskey.start }}"
                        tabindex="0">
                    <i class="fa fa-play-circle"></i>
                </button>
            </div>
            <div class="btn-group" role="group" aria-label="">
                <button type="button" class="btn btn-default btn-toggle-breakpoint"
                        title="{{ _('Toggle breakpoint') }}{{ _(' (accesskey+{0})'.format(accesskey.toggle_breakpoint)) }}"
                        accesskey="{{ accesskey.toggle_breakpoint }}"
                        tabindex="0">
                    <i class="fa fa-circle"></i>
                </button>
                <button type="button" class="btn btn-default btn-clear-breakpoint"
                        title="{{ _('Clear all breakpoints') }}{{ _(' (accesskey+{0})'.format(accesskey.clear_breakpoints)) }}"
                        accesskey="{{ accesskey.clear_breakpoints }}"
                        tabindex="0">
                    <i class="fa fa-ban"></i>
                </button>
            </div>
            <div class="btn-group" role="group" aria-label="">
                <button type="button" class="btn btn-default btn-stop"
                        accesskey="{{ accesskey.stop }}"
                        title="{{ _('Stop') }}{{ _(' (accesskey+{0})'.format(accesskey.stop)) }}"
                        tabindex="0">
                    <i class="fa fa-stop-circle"></i>
                </button>
            </div>
        </div>
    </nav>
    <div id="container" class="debugger-container" tabindex="0"></div>
</div>
{% endblock %}

{% block css_link %}
{% for stylesheet in stylesheets %}
<link type="text/css" rel="stylesheet" href="{{ stylesheet }}"/>
{% endfor %}
{% endblock %}
